<template>
    <div>
       <Layout :style="{background: '#fff', minHeight: '600px'}">
            <Header :style="{background: '#fff'}">
                <Button @click="getTreeData(0)" :class="{'current':type===0}">新闻</Button>
                <Button @click="getTreeData(1)" :class="{'current':type===1}">产品</Button>
            </Header>
            <Content :style="{width: '60%'}">
                <h3>分类列表：</h3>
                <div>
                     <Tree :data="treeData" :render="renderContent"  ></Tree>
                </div>
            </Content>
        </Layout>
        <Modal
            v-model="modal"
            :title="getTitile"
            @on-ok="ok"
            @on-cancel="cancel">
           <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="节点名" prop="title">
                    <Input v-model="formValidate.title" placeholder="请输入节点名"></Input>
                </FormItem>
            </Form>
        </Modal>

    </div>
</template>
<script>
    export default {
        data () {
            return {
                module: "cate",
                modalTitle:"新增",
                moduleName: "节点",
                modal:false,
                type:0,
                id:'',
                parentId:'',
                formValidate: {
                    title: ''
                },
                ruleValidate: {
                    title: [
                        { required: true, message: '节点名不能为空', trigger: 'blur' }
                    ]
                },
                treeData:  [
                                    {
                                        title: "全部",
                                        expand: true,
                                        render: (h, { root, node, data }) => {
                                            return h('span', {
                                                style: {
                                                    display: 'inline-block',
                                                    width: '100%'
                                                }
                                            }, [
                                                h('span', [
                                                    h('Icon', {
                                                        props: {
                                                            type: 'ios-folder-outline'
                                                        },
                                                        style: {
                                                            marginRight: '8px'
                                                        }
                                                    }),
                                                    h('span', data.title)
                                                ]),
                                                h('span', {
                                                    style: {
                                                        display: 'inline-block',
                                                        float: 'right',
                                                        marginRight: '32px'
                                                    }
                                                }, [
                                                    h('Button', {
                                                        props: Object.assign({}, this.buttonProps, {
                                                            icon: 'ios-plus-empty',
                                                            type: 'primary'
                                                        }),
                                                        style: {
                                                            width: '52px'
                                                        },
                                                        on: {
                                                            click: () => { this.showModal(data) }
                                                        }
                                                    })
                                                ])
                                            ]);
                                        },
                                        children:[]
                                        }],
                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                }
            }
        },
        methods: {
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-plus-empty'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.showModal(data) }
                            }
                        },"添加"),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-edit-empty'
                            }),
                             style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.showModal(root, node, data) }
                            }
                        },"修改"),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-minus-empty'
                            }),
                            on: {
                                click: () => { this.removeConfirm(root, node, data) }
                            }
                        },"删除")
                    ])
                ]);
            },
            showModal (root, node, data) {
                this.modal = true;
                if(data){
                    this.modalTitle = "编辑";
                    this.formValidate.title = data.title;
                    this.id = data._id;
                }else{
                    this.modalTitle = "新增";
                    this.parentId = root._id;
                }
            },
            findById(id){
                let me = this;
                this.$http({
                    method:'get',
                    url:`http://localhost:3000/${this.module}/data/${id}`
                }).then(function(response) {
                    me.formValidate = response.data;
                });
            },
            removeConfirm(root, node, data){
                this.$Modal.confirm({
                    title: '确认删除',
                    content: '<h3>确认要删除该节点吗？</h3>',
                    onOk: () => {
                        this.remove(data._id);
                    }
                });
            
            },
            update(){
                let me = this;
                this.loading = true;
                this.$http({
                    method:'put',
                    url:`http://localhost:3000/${this.module}/data/${this.id}`,
                    data:this.formValidate
                }).then(function(response) {
                    me.$Message.success('修改成功!');
                    me.modal = false;
                    me.getTreeData(me.type);
                });
            },
            add(data){
                this.modalTitle = "新增";
                let me = this;
                this.formValidate.type = this.type;
                this.formValidate.parentId = this.parentId;
                this.$http({
                    method:'post',
                    url:`http://localhost:3000/${this.module}/data`,
                    data:this.formValidate
                }).then(function(response) {
                    me.$Message.success('添加成功!');
                    me.cancel();
                    me.modal = false;
                    me.getTreeData(me.type);
                });
            },
            ok(){
                this.$refs['formValidate'].validate((valid) => {
                    if (valid) {
                        if(this.id){
                            this.update();
                        }else{
                            this.add();
                        }
                    }
                });
            },
            cancel () {
                this.$refs['formValidate'].resetFields();
            },
            remove(id){
                let me = this;
                this.loading = true;
                this.$http({
                    method:'delete',
                    url:`http://localhost:3000/${this.module}/data/${id}`,
                    data:this.formValidate
                }).then(function(response) {
                    me.$Message.success('操作成功!');
                     me.getTreeData(me.type);
                });
            },
            getTreeData(type){
                this.type = type;
                let me = this;
                this.$http({
                    method:'get',
                    url:`http://localhost:3000/cate/list/${this.type}`
                }).then(function(response) {
                    if(response.data && response.data.length>0){
                        me.$set(me.treeData[0], 'children', response.data);
                    }
                });
            }
        },
        created(){
            this.getTreeData(0);
        },
        computed:{
            getTitile(){
                return this.modalTitle + this.moduleName;
            }
        }
    }
</script>
<style>
.current{
    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
}
</style>
